<template>
	<div class="library_cover_box" v-loading="loading">
		<el-card shadow="never" v-for="(item, index) in libCoverList" :key="index" :header="item.label">
			<cover-upload :type="item.category" :list="item.children" @preview="handlePreviewCover" @refresh="queryLibCoverData"></cover-upload>
		</el-card>
		<image-viewer v-if="isPreview" :initialIndex="viewIndex" :url-list="imageUrlList" :on-close="handlePreviewClose"></image-viewer>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import coverUpload from './coverUpload';
import { getAttachList, attachDelete } from '@/api/global.js';
import imageViewer from 'element-ui/packages/image/src/image-viewer';
export default {
	components: { coverUpload, imageViewer },
	data() {
		return {
			loading: false,
			libCoverList: [],

			//预览
			isPreview: false,
			imageUrlList: [],
			viewIndex: 0
		};
	},
	computed: {
		...mapGetters(['dictEnums'])
	},
	mounted() {
		this.queryLibCoverData();
	},
	methods: {
		//获取库封面
		async getLibCoverData() {
			let params = { page: 1, limit: 9999, type: 5 };
			let result = await getAttachList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				let datas = !result.data ? [] : result.data;
				let tree = datas.reduce((t, v) => {
					return !t[v['category']] && (t[v['category']] = []), t[v['category']].push(v), t;
				}, {});
				this.libCoverList = this.dictEnums['RESOURCES_CATEGORY'].map((item) => {
					return {
						label: item.msg,
						category: item.value,
						children: tree[item.value] || []
					};
				});
			}
		},

		//查询封面数据
		async queryLibCoverData() {
			this.loading = true;
			this.getLibCoverData();
		},

		//预览图片
		handlePreviewCover(index, arr) {
			this.isPreview = true;
			this.viewIndex = index;
			this.imageUrlList = [...arr];
		},

		//关闭预览显示
		handlePreviewClose() {
			this.isPreview = false;
		}
	}
};
</script>
<style lang="scss" scoped>
.library_cover_box ::v-deep {
	flex: 1;
	padding: 16px;
	overflow: hidden;
	overflow-y: auto;
	.el-card {
		margin-top: 16px;
		&:first-child {
			margin-top: 0;
		}
	}
	.el-card__header {
		font-size: 15px;
		line-height: 1;
		font-weight: bold;
		padding: 15px;
	}
	.el-card__body {
		padding: 16px 0 0 16px;
	}
}
</style>
